<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>fqj</title> 
<script src="./vue.min.js"></script>
<style>
html, body, div, span,
table, tbody, tfoot, thead, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}
td, th {
  padding: 10px;
  overflow-wrap: break-word;
}

table input {
  width: 100%;
  box-sizing: border-box;
}

.th_name{
  width: 80px;
}

</style>
</head>
<body>

<div id="app">
  <table>
    <thead>
      <tr>
        <th :class="'th_' + key" v-for="key in keys">{{key}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items">
        <td v-for="key in keys">
          <span v-if="key == 'name'">{{item[key]}}</span>
          <span v-else-if="key == 'progress'">{{progress[index]}}</span>
          <input v-else v-model.number="item[key]" :disabled="disabled"/>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script>

var __info = null;

var keys = ['name', 'progress', 'interval', 'limit', 'val'];

var app = new Vue({
  el: '#app',
  data: {
    items: [],
    keys: keys,
    disabled: true,
    now: Date.now()
  },
  mounted: function(){
    var vm = this;

    window.__updata = function(info) {

      __info = info;

      var items = [];
      for (var key in info.items) {
        if (info.items.hasOwnProperty(key)) {
          var item = info.items[key];
          items.push(item);
        }
      }
      vm.items = items;
    }
    
    window.__setting = function(val){
      vm.disabled = typeof val == 'boolean' ? val : !vm.disabled;
    }
    
    setInterval(function(){
      vm.now = Date.now();
    }, 1000);
  },
  computed: {
    progress: function () {
      var vm = this;
      var list = [];
      for (var i = 0; i < vm.items.length; i++) {
        var item = vm.items[i];
        if(item.interval){
          if(item.time){
            list.push( Math.round( 100 * Math.min((vm.now - item.time)/item.interval, 1) ) + "%");
          }else{
            list.push('100%');
          }
        }else{
          list.push('');
        }
      }
      return list;
    }
  }
});

function __save(){
  document.title = JSON.stringify(__info);
}

</script>
</body>
</html>